<template>
  <el-container class="user-center-container" v-if="userInfo.uid">
    <el-main>
      <el-page-header @back="$router.go(-1)" content="用户信息" />
      <user-detail :info="userInfo" :self="self" :logined="isLogined" />
      <user-tabs />
    </el-main>
    <el-aside width="240px">
      <user-other :info="userInfo" />
      <user-operations v-if="showOperations" :info="userInfo" :self="self" />
      <!-- <user-honor /> -->
    </el-aside>
  </el-container>
</template>
 
<script>
import API from '~/interface/User';
import Cookie from 'js-cookie';
import UserDetail from '~/components/user/UserDetail';
import UserOther from '~/components/user/UserOther';
import UserHonor from '~/components/user/UserHonor';
import UserTabs from '~/components/user/UserTabs';
import UserOperations from '~/components/user/UserOperation';
export default {
  head() {
    return {
      title: this.pageTitle
    }
  },

  components: {
    UserDetail,
    UserOther,
    UserHonor,
    UserTabs,
    UserOperations
  },

  data() {
    return {
      uid: '',
      userInfo: {}
    }
  },

  computed: {
    isLogined() {
      let token = Cookie.get('rabbit_token');

      return Boolean(token)
    },
    self() {
      let userID = Cookie.get('rabbit_userID')
      return userID ? JSON.parse(userID) : {};
    },
    showOperations() {
      return this.isLogined && this.self.scope !== 'USER'
    },
    pageTitle() {
      if (this.userInfo && this.userInfo.username) {
        return this.userInfo.username + '的个人主页 - [rabbit-pie]';
      } else {
        return '个人中心 - [rabbit-pie]'
      }
    }
  },

  created() {
    this.getCurrentIDInfo();
  },

  methods: {
    getCurrentIDInfo() {
      this.uid = this.$route.params.uid;
      API.getUserDetail(this.uid).then(res => {
        this.userInfo = res;
      }).catch(err => {
        if (err.code === 10002 || err.msg === '用户不存在') {
          this.$router.go(-1);
        }
      });
    }
  }
}
</script>

<style lang="scss" scoped>
.el-container /deep/ .el-main {
  padding: 0;
  margin-right: 10px;
}
</style>